<template>
  <div class="contact">
  <div class="bg-dark text-white font-sans">
    <!-- 进度条 -->
    <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
      <div class="progress-line" :style="{ width: progress + '%' }"></div>
    </div>

    <!-- Hero区域 -->
    <section class="relative pt-24 pb-16 bg-darker overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-b from-darker to-dark opacity-50"></div>

      <!-- 装饰元素 -->
      <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-20 w-96 h-96 bg-secondary/10 rounded-full blur-3xl"></div>

      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
          <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
            联系<span class="text-primary">我们</span>
          </h1>
          <p class="text-gray-400 text-lg max-w-2xl mx-auto">
            无论您有任何问题或需求，我们都很乐意听取您的意见。请通过以下方式与我们联系，我们将尽快回复您。
          </p>
        </div>
      </div>
    </section>

    <!-- 联系信息和表单 -->
    <section class="py-20 bg-dark">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 联系信息 -->
          <div class="lg:col-span-1">
            <div class="bg-card rounded-xl p-8 h-full hover-lift">
              <h2 class="text-2xl font-bold mb-6">联系方式</h2>

              <div class="space-y-6">
                <div class="flex items-start">
                  <div class="text-primary text-xl mr-4 mt-1">
                    <i class="fa fa-map-marker"></i>
                  </div>
                  <div>
                    <h3 class="font-medium mb-1">公司地址</h3>
                    <p class="text-gray-400">
                      北京市海淀区中关村科技园区<br>
                      创业大厦A座15层
                    </p>
                  </div>
                </div>

                <div class="flex items-start">
                  <div class="text-primary text-xl mr-4 mt-1">
                    <i class="fa fa-envelope"></i>
                  </div>
                  <div>
                    <h3 class="font-medium mb-1">电子邮箱</h3>
                    <p class="text-gray-400">
                      商务合作: business@yunchuangsaas.com<br>
                      技术支持: support@yunchuangsaas.com<br>
                      人力资源: hr@yunchuangsaas.com
                    </p>
                  </div>
                </div>

                <div class="flex items-start">
                  <div class="text-primary text-xl mr-4 mt-1">
                    <i class="fa fa-phone"></i>
                  </div>
                  <div>
                    <h3 class="font-medium mb-1">联系电话</h3>
                    <p class="text-gray-400">
                      客服热线: 400-123-4567<br>
                      商务合作: 010-8888-7777<br>
                      技术支持: 010-8888-6666
                    </p>
                  </div>
                </div>

                <div class="flex items-start">
                  <div class="text-primary text-xl mr-4 mt-1">
                    <i class="fa fa-clock-o"></i>
                  </div>
                  <div>
                    <h3 class="font-medium mb-1">工作时间</h3>
                    <p class="text-gray-400">
                      周一至周五: 9:00 - 18:00<br>
                      周六至周日: 休息
                    </p>
                  </div>
                </div>
              </div>

              <div class="mt-10">
                <h3 class="font-medium mb-4">关注我们</h3>
                <div class="flex space-x-4">
                  <a href="#" class="w-10 h-10 rounded-full bg-darker flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-weixin"></i>
                  </a>
                  <a href="#" class="w-10 h-10 rounded-full bg-darker flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-weibo"></i>
                  </a>
                  <a href="#" class="w-10 h-10 rounded-full bg-darker flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="w-10 h-10 rounded-full bg-darker flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-github"></i>
                  </a>
                  <a href="#" class="w-10 h-10 rounded-full bg-darker flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-youtube-play"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- 联系表单 -->
          <div class="lg:col-span-2">
            <div class="bg-card rounded-xl p-8 hover-lift">
              <h2 class="text-2xl font-bold mb-6">发送消息</h2>
              <p class="text-gray-400 mb-8">
                填写以下表单，我们将在24小时内与您联系
              </p>

              <form @submit.prevent="submitContactForm">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div>
                    <label for="name" class="block text-sm font-medium mb-2">姓名</label>
                    <input type="text" id="name" v-model="formData.name" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary" placeholder="请输入您的姓名" required>
                  </div>

                  <div>
                    <label for="email" class="block text-sm font-medium mb-2">电子邮箱</label>
                    <input type="email" id="email" v-model="formData.email" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary" placeholder="请输入您的电子邮箱" required>
                  </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div>
                    <label for="phone" class="block text-sm font-medium mb-2">电话</label>
                    <input type="tel" id="phone" v-model="formData.phone" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary" placeholder="请输入您的电话号码">
                  </div>

                  <div>
                    <label for="subject" class="block text-sm font-medium mb-2">主题</label>
                    <select id="subject" v-model="formData.subject" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary">
                      <option value="">请选择咨询主题</option>
                      <option value="product">产品咨询</option>
                      <option value="pricing">价格咨询</option>
                      <option value="support">技术支持</option>
                      <option value="cooperation">商务合作</option>
                      <option value="other">其他问题</option>
                    </select>
                  </div>
                </div>

                <div class="mb-6">
                  <label for="message" class="block text-sm font-medium mb-2">消息内容</label>
                  <textarea id="message" v-model="formData.message" rows="5" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary resize-none" placeholder="请输入您的消息内容" required></textarea>
                </div>

                <div class="mb-6">
                  <label class="flex items-center">
                    <input type="checkbox" v-model="formData.agreed" class="w-4 h-4 text-primary bg-darker border-gray-700 rounded focus:ring-primary" required>
                    <span class="ml-2 text-sm text-gray-400">我同意狂速科技SAAS的<a href="#" class="text-primary hover:underline">隐私政策</a>和<a href="#" class="text-primary hover:underline">服务条款</a></span>
                  </label>
                </div>

                <button type="submit" class="px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                  发送消息
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 地图区域 -->
    <section class="py-20 bg-darker">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">我们的<span class="text-primary">位置</span></h2>
          <p class="text-gray-400 max-w-2xl mx-auto">
            狂速科技SAAS总部位于北京市海淀区中关村科技园区，欢迎前来参观交流
          </p>
        </div>

        <div class="bg-card rounded-xl overflow-hidden hover-lift">
          <!-- 这里是地图容器，实际项目中可以嵌入真实的地图服务 -->
          <div class="h-[400px] w-full relative">
            <img src="https://picsum.photos/1200/400?random=200" alt="公司地图位置" class="w-full h-full object-cover">

            <!-- 地图标记 -->
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-pulse">
              <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white relative">
                <i class="fa fa-map-marker text-2xl"></i>
                <div class="absolute -inset-1 bg-primary/50 rounded-full animate-ping"></div>
              </div>
            </div>

            <!-- 地图信息卡片 -->
            <div class="absolute top-4 left-4 bg-dark/80 backdrop-blur-sm p-4 rounded-lg max-w-xs">
              <h3 class="font-bold mb-2">狂速科技SAAS总部</h3>
              <p class="text-gray-300 text-sm mb-2">北京市海淀区中关村科技园区创业大厦A座15层</p>
              <div class="flex items-center text-sm text-gray-400">
                <i class="fa fa-phone mr-2"></i> 400-123-4567
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="py-20 bg-dark">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">常见<span class="text-primary">问题</span></h2>
          <p class="text-gray-400 max-w-2xl mx-auto">
            以下是我们收到的一些常见问题，如果您没有找到您需要的答案，请随时联系我们
          </p>
        </div>

        <div class="max-w-3xl mx-auto">
          <div class="space-y-4">
            <!-- FAQ项 -->
            <div v-for="(faq, index) in faqList" :key="index" class="bg-card rounded-xl overflow-hidden">
              <button class="faq-toggle w-full px-6 py-4 text-left font-medium flex justify-between items-center" @click="toggleFaq(index)">
                <span>{{ faq.question }}</span>
                <i :class="['fa', faq.isOpen ? 'fa-minus' : 'fa-plus', 'text-primary', 'transition-transform']"></i>
              </button>
              <div :class="['faq-content', 'px-6', 'pb-4', faq.isOpen ? '' : 'hidden']">
                <p class="text-gray-400">
                  {{ faq.answer }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
    </div>
</template>

<script>
export default {
    layout: "default",
  name: "ContactView",
  data() {
    return {
      isMobileMenuOpen: false,
      progress: 0,
      formData: {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        agreed: false
      },
      faqList: [
        {
          question: '狂速科技SAAS平台支持哪些类型的小程序开发？',
          answer: '狂速科技SAAS平台支持多种类型的小程序开发，包括但不限于电商小程序、餐饮点餐系统、教育培训机构管理系统、酒店预订系统、美业预约平台、生鲜配送系统、多商家入驻平台以及企业展示小程序等。我们提供了丰富的行业模板和功能模块，能够满足不同行业的需求。',
          isOpen: false
        },
        {
          question: '如何开始使用狂速科技SAAS平台？',
          answer: '使用狂速科技SAAS平台非常简单，您只需访问我们的官网，注册账号并选择适合您的套餐。注册完成后，您可以根据系统引导完成小程序的基础设置，包括上传商品、设置页面、配置支付方式等。我们也提供详细的使用教程和客服支持，帮助您...',
          isOpen: false
        }
        // 可按需添加更多 FAQ 项
      ]
    };
  },
  mounted() {
    window.addEventListener('scroll', this.updateProgress);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.updateProgress);
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    updateProgress() {
      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    },
    submitContactForm() {
      // 这里可以添加表单提交逻辑，例如发送请求到后端
      console.log('表单提交数据:', this.formData);
      // 提交成功后清空表单
      this.formData = {
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        agreed: false
      };
    },
    toggleFaq(index) {
      this.faqList[index].isOpen = !this.faqList[index].isOpen;
    }
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }
  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
}

:root {
  --primary: #48b6ff;
  --secondary: #2e6cf1;
  --dark: #080812;
  --darker: #04040a;
  --card: #1a1a31;
}

body {
  background-color: var(--dark);
  color: white;
  font-family: 'Segoe UI', sans-serif;
}

.faq-toggle .fa-plus {
  transition: transform 0.3s ease;
}

.faq-toggle.active .fa-plus {
  transform: rotate(45deg);
}
</style>
